{% extends "base_generic.html" %}

{% block content %}
  <h1 class="mb-4">我的收藏</h1>
  
  <div class="row">
    {% for favorite in object_list %}
      <div class="col-md-4 mb-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">
              <a href="{{ favorite.book.get_absolute_url }}">{{ favorite.book.title }}</a>
            </h5>
            <h6 class="card-subtitle mb-2 text-muted">{{ favorite.book.author }}</h6>
            <p class="card-text">{{ favorite.book.summary|truncatewords:30 }}</p>
          </div>
          <div class="card-footer bg-white">
            <div class="d-flex justify-content-between align-items-center">
              <small class="text-muted">收藏于: {{ favorite.added_date|date:"Y-m-d" }}</small>
              <button 
                class="btn btn-sm btn-danger remove-favorite"
                data-book-id="{{ favorite.book.pk }}"
                onclick="removeFavorite({{ favorite.book.pk }}, this)">
                <i class="fa fa-trash"></i> 取消收藏
              </button>
            </div>
          </div>
        </div>
      </div>
    {% empty %}
      <div class="col-12">
        <div class="alert alert-info">
          您还没有收藏任何书籍。浏览<a href="{% url 'books' %}">图书目录</a>并收藏您感兴趣的书籍。
        </div>
      </div>
    {% endfor %}
  </div>
  
  <!-- 分页 -->
  {% if is_paginated %}
    <nav aria-label="分页">
      <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
          <li class="page-item">
            <a class="page-link" href="?page=1">&laquo; 首页</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a>
          </li>
        {% endif %}
        
        {% for i in paginator.page_range %}
          {% if page_obj.number == i %}
            <li class="page-item active">
              <span class="page-link">{{ i }} <span class="sr-only">(current)</span></span>
            </li>
          {% elif i > page_obj.number|add:'-3' and i < page_obj.number|add:'3' %}
            <li class="page-item">
              <a class="page-link" href="?page={{ i }}">{{ i }}</a>
            </li>
          {% endif %}
        {% endfor %}
        
        {% if page_obj.has_next %}
          <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="?page={{ paginator.num_pages }}">末页 &raquo;</a>
          </li>
        {% endif %}
      </ul>
    </nav>
  {% endif %}
{% endblock %}

{% block extra_js %}
<script>
  function removeFavorite(bookId, button) {
    fetch(`/catalog/book/${bookId}/favorite/`)
      .then(response => response.json())
      .then(data => {
        if (!data.is_favorite) {
          // 收藏已删除，移除卡片
          button.closest('.col-md-4').remove();
          
          // 检查是否已没有收藏项
          const remainingItems = document.querySelectorAll('.col-md-4').length;
          if (remainingItems === 0) {
            // 创建提示消息
            const row = document.querySelector('.row');
            row.innerHTML = `
              <div class="col-12">
                <div class="alert alert-info">
                  您还没有收藏任何书籍。浏览<a href="{% url 'books' %}">图书目录</a>并收藏您感兴趣的书籍。
                </div>
              </div>
            `;
          }
        }
      });
  }
</script>
{% endblock %} 